<!--
* description: 选装包/车身颜色/内饰颜色/弹窗
* author: duanhy
* createdDate: 2020-12-15
-->
<template>
  <el-col v-show="curIsShow" :key="fullComponentKey" :span="span">
    <lableName
      :validrule="validrule"
      :cur-label-name="curLabelName"
      :is-show-label="isShowLabel"
      :is-require="isRequire"
      :curis-func="curisFunc"
      :max-word-count="dataToObject==null ? 6 :dataToObject.maxWordCount"
      :label-width="labelWidth"
      @clickEvent="sendLabelCode"
    />
    <el-input
      v-show="curIsShowComp"
      v-model="modelCode"
      :placeholder="placeholder"
      :disabled="curDisabled"
      :readonly="readonly"
      size="small"
      :maxlength="dataToObject==null ? null :dataToObject.maxLength"
      suffix-icon="el-icon-s-unfold"
      :clearable="clearable"
      :type="inputType"
      :style="{'width': (labelWidth !== 80 ? `calc(100% - ${labelWidth}px)`: '')}"
      @focus="getfocus"
      @clear="clearCode"
      @change="sendCode"
      @input="inputCode"
      @blur="inputBlur"
    />
    <span v-show="!curIsShowComp" @click="showCompByClick(true)">{{ modelCode }}</span>
    <validateFormate :cur-label-name="curLabelName" :validrule="validrule" />
    <plan
      v-if="isEdit"
      :key="editPopupsKey"
      :popups-visible.sync="orderPopupsVisible"
      :data-for-form="editRowData"
      :title-name="titleName"
      :lable="lable"
      :is-require="isRequire"
      @close="close"
      @save="save"
    />
  </el-col>
</template>
<script>
import { inputMixins } from '@/components/mixins/inputMixins'
import plan from './setting'
export default {
  components: {
    plan,
    lableName: () => import('@/components/lableName'), // 标题溢出样式组件
    validateFormate: () => import('@/components/validateFormate') // 校验提示样式组件
  },
  mixins: [inputMixins],
  props: {
    showPlaceholder: { type: String, default: null }
  },
  data() {
    return {
      isEdit: false,
      placeholder: '请选择',
      orderPopupsVisible: false,
      editPopupsKey: '',
      editRowData: {},
      editPopupsVisible: '',
      titleName: '',
      lable: ''
    }
  },
  mounted() {
    this.titleName = this.curLabelName.substr(0, this.curLabelName.length - 1) + '选择'
    if (this.titleName === '选装包选择' || this.titleName === '车身颜色选择' || this.titleName === '内饰颜色选择') {
      this.lable = this.curLabelName.substr(0, this.curLabelName.length - 1)
    } else {
      this.lable = this.curLabelName.substr(0, this.curLabelName.length - 3)
    }
  },
  methods: {
    getfocus() {
      this.isEdit = true
      this.orderPopupsVisible = true
    },
    close() {
      this.isEdit = false
      this.orderPopupsVisible = false
    },
    save(val) {
      console.log(val)
      if (this.lable === '车系') {
        this.modelCode = val.carSeriesCn
        this.$parent.$parent.$parent.dynamicFormFields.carSeriesCn = val.carSeriesCn
      }
      if (this.lable === '车型') {
        this.modelCode = val.carConfigCn
        this.$parent.$parent.$parent.dynamicFormFields.carConfigCn = val.carConfigCn
      }
      if (this.lable === '选装包') {
        this.modelCode = val.optionalPagName
        this.$parent.$parent.$parent.dynamicFormFields.optionalPagName = val.optionalPagName
      }
      if (this.lable === '车身颜色') {
        this.modelCode = val.carColorName
        this.$parent.$parent.$parent.dynamicFormFields.carColorName = val.carColorName
      }
      if (this.lable === '内饰颜色') {
        this.modelCode = val.carIncolorName
        this.$parent.$parent.$parent.dynamicFormFields.carIncolorName = val.carIncolorName
      }
      if (this.lable === '门店') {
        this.modelCode = val.dlrShortName
        this.$parent.$parent.$parent.dynamicFormFields.dlrShortName = val.dlrShortName
      }
    }
  }
}
</script>
